<template>
    <div class="chart-box" ref="chart"> </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "DeliveryRate",
    data() {
        return {
            options: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '8%',
                    top: '20%',
                    containLabel: true
                },

                legend: {
                    left: 'right',
                    align: 'left',
                    top: '6%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    nameLocation: 'end',
                    nameGap: 5,
                    data: [
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月',
                        '1月',
                        '2月',
                        '3月',
                    ],
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#353B45'
                        }
                    },
                    axisTick: {
                        show: false //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#FEFEFE' ,
                            fontSize: '16' 
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: '#fff'
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#353B45'
                        }
                    },
                    axisTick: {
                        show: false //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        formatter: function (value) {
                            return value.toLocaleString() + '%';

                        },
                        textStyle: {
                            color: '#FEFEFE',
                            fontSize: '16' 
                        }
                    }
                },
                series: [

                    {
                        name: '原告',
                        type: 'bar',
                        barWidth: 15,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [60,60,0,0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0C84FF'
                            }, {
                                offset: 1,
                                color: '#16AFBD'
                            }]),
                        },
                    },
                        data: [4.2, 3.8, 4.8, 3.5, 2.9, 4.8, 3.5, 2.9]
                    },
                    {
                        name: '被告',
                        type: 'line',
                        showAllSymbol: true, //显示所有图形。
                        symbol: 'circle', //标记的图形为实心圆
                        symbolSize: 8, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: '#E4FF01'
                        },
                        lineStyle: {
                            color: '#E4FF01'
                        },
                        data: [4.2, 3.8, 4.8, 3.5, 2.9, 4.8, 3.5, 2.9]
                    },
                ]
            }

        }
    },
    mounted() {
        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart)
            chart.setOption(this.options)
        }, 0);
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 385px;
}
</style>